<template>
    <!-- 风险清单 -->
    <div class="system4Das">
        <div class="system4DasDiv">
            <div class="system4Das_main">
                <h1>事故名称</h1>
                <p>{{listObj.CaseName}}</p>
            </div>
            <div class="system4DasDiv_top">
                <ul class="ul11">
                    <li class="clearfix">
                        <span class="spa">事故单位</span>
                        <em>{{listObj.CaseDepart}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">事故时间</span>
                        <em>{{listObj.ProduceDate}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">事故等级</span>
                        <em>{{listObj.AccidentLevel}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">事故类别</span>
                        <em>{{listObj.CaseTypeName}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">涉事单位</span>
                        <em :title="listObj.MatterDepart">{{listObj.MatterDepart}} </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">涉事工种</span>
                        <em>{{listObj.RelatedJob}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">死亡人数</span>
                        <em>{{listObj.Deaths}}</em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">所属辖区</span>
                        <em>{{listObj.Province}}</em>
                    </li>
                    <!-- <li class="clearfix">
                        <span class="spa">附件信息</span>
                        <em>{{listObj.CaseDepart}}</em>
                    </li> -->
                </ul>
                <div class="queryBtn" @click="goPreview(listObj.FileDownPath)">全文预览</div>
                <!-- <a :href="listObj.FileDownPath" class="queryBtn">全文预览</a> -->
            </div>
        </div>
        <!-- <p v-if="!nodata" class="noDestail">暂无数据...</p> -->
        <noData v-if="!listObj"></noData>
        <myMenu @clickBack="back" backPath='/Index/newEdit'></myMenu>
        <actionsheet
            v-model="show"
            :menus="menu7"
            >
        </actionsheet>
    </div>
</template>
<script>
import {Actionsheet, Datetime, Radio } from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
    components: {
        Radio,
        myMenu,
        Datetime,
        Actionsheet
    },
    data () {
        return {
            menu7: {name: '11111111111111111111111111112,122222222222'},
            show: false,
            name1: '',
            name2: '',
            name3: '',
            parmas: {
                'allowPaging': true,
                'business': 'GetAccidentCaseDetail',
                'data': this.$route.query.id,
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': 'AF0EC33214DA0CE97E2067CC1C4E3A6E',
                'userId': ''
            },
            listObj: {},
            nodata: true
        }
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        this.getData()
    },
    methods: {
        // 获取列表数据
        getData () {
            let that = this
            this.$axiosAjax.getConfigJson(this.parmas)
            .then((res) => {
                // console.log(res)
                if (res.data.code == 0) {
                    that.listObj = res.data.data
                }
            })
        },
        // 预览
        goPreview (path) {
            if (path) {
                this.$router.push({
                    path: '/listmenus',
                    query: {
                        src: path
                    }
                })
            }
        },
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./riskMonitoring')
        },
        go3 () {
            window.sessionStorage.clear()
            this.$router.push('./riskInfo')
        },
        go4 () {
            window.sessionStorage.clear()
            this.$router.push('./riskInfo')
        }
    }
}
</script>
<style lang="less" scope>
.system4Das{
    width: 100%;
    height: 100%;
    .system4DasDiv{
        width: 100%;
        .system4Das_main{
            // height: 70px;
            width: 100%;
            padding:8px 10px;
            margin-bottom: 10px;
            border-bottom: 10px solid #ebeef3;
            h1{
                height: 28px;
                line-height: 28px;
                font-size: 14px;
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #666;
            }
            p{
                line-height: 20px;
                font-size: 14px;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
                color: #999;
            }
        }
        .system4DasDiv_top{
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11{
                padding: 0 10px;
                li{
                    padding: 10px 0;
                    border-bottom:1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    font-size: 16px;
                    display: flex;
                    .vux-x-icon{
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: -10px;
                    }
                    .spa{
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 150px;
                        color: #333;
                        font-size: 14px!important;
                        line-height: 30px!important;
                    }
                    em{
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        div{
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input{
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top:6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                    .weui-cell{
                        // display: none;
                        padding: 0;
                    }
                    .weui-cell_access{
                        width: 220px;
                    }
                    .vux-cell-value{
                        float: right;
                    }
                }
            }
            .queryBtn{
                display: block;
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 20px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    .noDestail{
        background-color: #fff;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
    .weui-actionsheet{
        top: 50%;
        // width: 90%;
        // left: 20px;
        background-color:rgba(0,0,0,0);
    }
    .weui-actionsheet__menu{
        margin: 0 auto;
        width: 90%;
        height: 300px;
        overflow-y: auto;
        line-height: 20px;
        border-radius: 10px;
    }
    .vux-actionsheet-menu-default{
        padding: 10px!important;
        text-align: left;
    }

}
</style>
